<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
    <title>尹志辉的个人博客</title>
    <link rel="stylesheet" href="../css/normalize.css">
    <link rel="stylesheet" href="../statics/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="./comment.css">
    <style>

    </style>
</head>

<body>

    <header>
    </header>
    <main id="main" class="container">
        <div id="path" class="row">
            <div class="col-md-4 col-sm-6 col-xs-10">
                <ol class="breadcrumb">
                    <li class="text-primary">尹志辉的个人博客</li>
                    <li><a href="../index.html">首页</a></li>
                    <li class="active">留言</li>
                </ol>
            </div>
        </div>
        <div class="row">

            <div id="section" class="col-md-8 col-sm-12 col-xs-12">
                <div class="comment">
                    <h4 class="text-primary">我要留言:</h4>
                    <div class="row">
                        <div id="form" class="col-md-6 col-sm-9 col-xs-8">
                            <div class="form-group text-primary">
                                <label for="name"><i class="glyphicon glyphicon-user"></i> Name:</label>
                                <input type="text" class="form-control" id="name" placeholder="">
                            </div>
                            <div class="form-group text-primary">
                                <label for="email"><i class="glyphicon glyphicon-envelope"></i> Email:</label>
                                <input type="email" class="form-control" id="email" placeholder="">
                            </div>
                            <div class="form-group text-primary">
                                <label for="message"><i class="glyphicon glyphicon-pencil"></i> Message:</label>
                                <div class="form-contol" id="message" contenteditable="true"> ......</div>
                            </div>
                            <button type="submit" class="btn btn-primary col-md-4"><i class="glyphicon glyphicon-send"></i> submit</button>
                        </div>
                    </div>
                </div>
                <div class="comments">
                    <h3>评论:</h3>
                    <ul class="media-list">
                        <li class="media">
                            <div class="media-top">
                                <a href="#">
                                    <img class="media-object" src="../images/微博.png" alt="...">
                                </a>
                                <div>
                                    <h5 class="media-heading text-primary">测试用户</h5>
                                    <p class="date">2017年8月11日 10:25</p>
                                </div>
                            </div>
                            <div class="media-body">

                                <p> 测试一下! 测试一下! 测试一下! 测试一下! 测试一下! 测试一下! 测试一下! 测试一下! 测试一下! 测试一下! 测试一下! 测试一下! 测试一下! 测试一下! 测试一下! 测试一下! 测试一下! 测试一下! 测试一下! 测试一下! 测试一下! 测试一下! 测试一下! 测试一下! 测试一下! 测试一下! 测试一下!</p>

                            </div>
                            <div class="media-bottom">
                                <button type="button" class="btn btn-link btn-xs"><i class="glyphicon glyphicon-comment"></i> 回复</button>
                                <button type="button" class="btn btn-link btn-xs"> <i class="glyphicon glyphicon-thumbs-up"></i> 赞 !</button>
                            </div>
                        </li>
                        <li class="media">
                            <div class="media-top">
                                <a href="#">
                                    <img class="media-object" src="../images/微博.png" alt="...">
                                </a>
                                <div>
                                    <h5 class="media-heading text-primary">测试用户</h5>
                                    <p class="date">2017年8月11日 10:25</p>
                                </div>
                            </div>
                            <div class="media-body">

                                <p> 测试一下!</p>

                            </div>
                            <div class="media-bottom">
                                <button type="button" class="btn btn-link btn-xs"><i class="glyphicon glyphicon-comment"></i> 回复</button>
                                <button type="button" class="btn btn-link btn-xs"> <i class="glyphicon glyphicon-thumbs-up"></i> 赞 !</button>
                            </div>
                        </li>
                        <li class="media">
                            <div class="media-top">
                                <a href="#">
                                    <img class="media-object" src="../images/微博.png" alt="...">
                                </a>
                                <div>
                                    <h5 class="media-heading text-primary">测试用户</h5>
                                    <p class="date">2017年8月11日 10:25</p>
                                </div>
                            </div>
                            <div class="media-body">

                                <p> 测试一下!</p>

                            </div>
                            <div class="media-bottom">
                                <button type="button" class="btn btn-link btn-xs"><i class="glyphicon glyphicon-comment"></i> 回复</button>
                                <button type="button" class="btn btn-link btn-xs"> <i class="glyphicon glyphicon-thumbs-up"></i> 赞 !</button>
                            </div>
                        </li>
                        <li class="media">
                            <div class="media-top">
                                <a href="#">
                                    <img class="media-object" src="../images/微博.png" alt="...">
                                </a>
                                <div>
                                    <h5 class="media-heading text-primary">测试用户</h5>
                                    <p class="date">2017年8月11日 10:25</p>
                                </div>
                            </div>
                            <div class="media-body">

                                <p> 测试一下!</p>

                            </div>
                            <div class="media-bottom">
                                <button type="button" class="btn btn-link btn-xs"><i class="glyphicon glyphicon-comment"></i> 回复</button>
                                <button type="button" class="btn btn-link btn-xs"> <i class="glyphicon glyphicon-thumbs-up"></i> 赞 !</button>
                            </div>
                        </li>
                        <li class="media">
                            <div class="media-top">
                                <a href="#">
                                    <img class="media-object" src="../images/微博.png" alt="...">
                                </a>
                                <div>
                                    <h5 class="media-heading text-primary">测试用户</h5>
                                    <p class="date">2017年8月11日 10:25</p>
                                </div>
                            </div>
                            <div class="media-body">

                                <p> 测试一下!</p>

                            </div>
                            <div class="media-bottom">
                                <button type="button" class="btn btn-link btn-xs"><i class="glyphicon glyphicon-comment"></i> 回复</button>
                                <button type="button" class="btn btn-link btn-xs"> <i class="glyphicon glyphicon-thumbs-up"></i> 赞 !</button>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="text-center loadmore">
                    <a class="" href="#">Load More</a>

                </div>
            </div>
            <div id="slide" class="col-md-4 hidden-xs">
                <ul class="list">
                    <li class="">姓名:尹志辉</li>
                    <li class="">籍贯:湖南</li>
                    <li class="">现居:深圳</li>
                    <li class="">职业:web前端开发</li>
                    <li class="">邮箱:18251953430@163.com</li>
                    <li class="">github:<a href="https://github.com/BlueFantast">https://github.com/BlueFantast</a></li>

                </ul>
            </div>
        </div>
    </main>
    <footer class="container">
        <div class="row">
            <div class="col-md-12">
                <p class="author">
                    <i class="glyphicon glyphicon-copyright-mark"></i> Design by yinzhihui <a href="http://www.miitbeian.gov.cn/">深ICP备11002373号-1</a>
                </p>
            </div>
        </div>
    </footer>
</body>

</html>